import React,{ Component } from 'react';
import {
	StyleSheet,
	View,
	Text,
	Image,
	FlatList,
	TouchableOpacity,
	Platform
} from 'react-native';
import OpenFile from 'react-native-doc-viewer';
import { HeaderDatepicker } from '../../common';
import Axios from '../../axios';
import StorageUtil from '../../common/storageUtil';

// class HeaderLeft extends Component{
// 	render(){
// 		return(
// 			<TouchableOpacity>
// 				<View style={styles.topLeftWraper}>
// 					<Image
// 						style={styles.topLeftImg}
// 						source={require('../../assets/images/area_icon.png')}
// 					/>
// 					<Text
// 						style={styles.topLeftTxt}
// 					>全省</Text>
// 				</View>
// 			</TouchableOpacity>
// 		)
// 	}
// }

class PresentationCell extends Component{
	handlePress = (item) => {
        if (Platform.OS === 'ios') {
            OpenFile.openDocb64([{
                base64: item.data.base64,
				fileName: item.data.fileName,
				fileType: item.data.fileType
            }], (error, url) => {
                if (error) {
					console.log(error)
                } else {
                    console.log(url)
                }
            })
        } else {
			//Android
            OpenFile.openDocb64([{
                base64: item.data.base64,
				fileName: item.data.fileName,
				fileType: item.data.fileType,
				cache: true
            }], (error, url) => {
                if (error) {
                    console.log(error);
                } else {
                    console.log(url)
                }
            })
        }
    }

	itemClickShowDetail = async (item)=>{
		const fileInfo = await StorageUtil.getItem(item.FILE_PATH);
		if(fileInfo){
			console.log(fileInfo);
			this.handlePress(fileInfo);
		}else{
			Axios.ajax({
				url:'/app/getFile/',
				data:{
					path:item.FILE_PATH
				}
			}).then((res)=>{
				console.log(res);
				StorageUtil.setItem(item.FILE_PATH,res);
				this.handlePress(res);
			})
		}
	}

	render(){
		const {item} = this.props;
		return (<View style={styles.presentationCellWrap}>
			    	<View style={styles.presentationHeaderWrap}>
			    		<View style={styles.presentationHeaderTitle}>
			    			<Image
								style={styles.presentationHeaderImg}
			    				source={require('../../assets/images/presentation_title_icon.jpg')} />
			    			<Text style={styles.presentationHeaderTxt}>{item.MENU_TITLE.split("_")[0]}</Text>
			    		</View>
			    	</View>
			    	<TouchableOpacity
						onPress={()=>this.itemClickShowDetail(item)}
			    	>
			    		<View style={styles.presentationCellContentWrap}>
				    		<View style={styles.presentationContentImgWrap}>
				    			<Image
				    			style={styles.presentationContentImg}
								source={require('../../assets/images/presentation_banner01.jpg')}
				    			/>	
				    			<Text style={styles.presentationContentTxt}>{item.MENU_TITLE.split("(")[0]}大数据分析报告</Text>
				    		</View>
				    		<View style={styles.pageContent}>
				    			<Text style={styles.pageConTxt}>{item.MENU_TITLE.split("_")[1]}页</Text>
				    		</View>
				    	</View>
			    	</TouchableOpacity>
			    </View>)
	}
}

export default class Presentation extends Component{
	state = {
		presentationList:[],
		isRefresh:true
	}
	static navigationOptions = ({navigation,navigationOptions})=>{
		return {
			// title:"首页",
			// headerTitle:<HeaderDatepicker styles={{paddingLeft:56}}/>,
			// headerStyle:{
			// 	...navigationOptions.headerStyle,
			// 	backgroundColor:"#f54545"
			// },
			// headerTitleContainerStyle:{
			// 	marginLeft:-56
			// },
			// headerLeft:<HeaderLeft onPress={()=>navigation.goBack()} />

			title:"报告",
			headerStyle:{
				...navigationOptions.headerStyle,
				backgroundColor:"#f54545"

			},
			headerTitleStyle:{
				fontSize:18,
				flex:1,
				textAlign:'center'
			},
			headerLeft:<View></View>,
			headerRight:<View></View>
		}
	}
	getPresentation = ()=>{
		Axios.ajax({
			url:'/app/getMenu/4'
		}).then((res)=>{
			console.log(res)
			this.setState({presentationList:res.data,isRefresh:false})
		})
	}
	componentDidMount(){
		this.getPresentation();
	}
	onRefresh = ()=>{
		this.getPresentation();
	}
	render(){
		const { navigate } = this.props.navigation;
		return(
			<View style={styles.container}>
				<FlatList
				 	keyExtractor={(item)=>item.MENU_ID.toString()}
				    data={this.state.presentationList}
				    renderItem={({item}) => (<PresentationCell item={item} navigate={navigate} />)}
				    onRefresh={() => this.onRefresh()}
    				refreshing={this.state.isRefresh}
				/>
			</View>
		)
	}
}

const styles = StyleSheet.create({
	pageConTxt:{
		color:'#fff'
	},
	pageContent:{
		position:'absolute',
		bottom:0,
		right:25,
		backgroundColor:'#000',
		opacity:0.5,
		paddingTop:5,
		paddingRight:10,
		paddingBottom:5,
		paddingLeft:10,
		borderRadius:20
	},
	container : {
		flex : 1,
		backgroundColor:'#f5f5f5'
	},
	textColor:{
		color:'#f00'
	},
	topLeftWraper:{
		flex:1,
		flexDirection:'row',
		justifyContent:'center',
		alignItems:'center'
	},
	topLeftImg:{
		width:18,
		height:18,
		marginLeft:10
	},
	topLeftTxt:{
		color:'#fff',
		fontSize:16,
		marginLeft:5
	},
	presentationCellWrap:{
		backgroundColor:"#fff",
		marginTop:8
	},
	presentationHeaderWrap:{
		flex:1,
		flexDirection:'row',
		alignItems:"center",
		padding:10,
		borderBottomWidth:1,
		borderBottomColor:"#f7f7f7"
	},
	presentationHeaderTitle:{
		flex:1,
		flexDirection:'row',
		alignItems:"center"
	},
	presentationHeaderImg:{
		width:24,
		height:18,
		marginRight:5
	},
	presentationHeaderTxt:{
		fontSize:14
	},
	presentationCellContentWrap:{
		flex:1,
		justifyContent:"center",
		alignItems:"center",
		marginTop:10,
		marginBottom:10
	},
	presentationContentImg:{
		width:340,
		height:140,
		marginBottom:10
	},
	presentationContentImgWrap:{
		justifyContent:'center'
	},
	presentationContentTxt:{
		position:'absolute',
		top:'50%',
		color:'#fff',
		width:340,
		textAlign:'center',
		fontSize:16,
		fontWeight:'bold',
		marginTop:-16
	},
	collectWrap:{
		paddingLeft:20,
		paddingRight:20
	},
	collectContent:{
		flex:1,
		flexDirection:"row",
		justifyContent:"center",
		alignItems:"center",
		borderTopWidth:1,
		borderTopColor:"#f7f7f7",
		paddingTop:10,
		paddingBottom:10
	},
	collectImg:{
		width:20,
		height:20,
		marginRight:5
	}
})
